<template>
  <view class="mine-page">
    <view class="top-box">
      <view class="nav-bar" :style="{ height: navBarHeight }"></view>
      <view class="user-info">
        <view class="user-img" @click="toLogin">
          <image
            class="user-head"
            :src="userInfo.avatar || '../static/images/my/22.png'"
          ></image>
        </view>
        <view class="info">
          <view class="henad">
            <view class="flex">
              <view class="name">{{ userInfo.nickName || "未登录" }}</view>
              <!-- vip/svip -->
              <image
                v-if="userInfo.nickName && memberUserInfo.memberLevel == 1"
                class="vip"
                src="/static/images/my/vip.png"
              ></image>
              <image
                v-if="userInfo.nickName && memberUserInfo.memberLevel == 2"
                class="vip"
                src="/static/images/my/svip.png"
              ></image>
              <!-- 代理身份 -->
              <!-- 共享店主 -->
              <image
                v-if="
                  userInfo.nickName && memberUserInfo.memberAgencyLevel == 3
                "
                style="width: 113rpx; height: 33rpx"
                src="/static/images/my/gxdz.png"
              ></image>
              <!-- 联创 -->
              <image
                v-if="
                  userInfo.nickName && memberUserInfo.memberAgencyLevel == 4
                "
                style="width: 78rpx; height: 33rpx"
                src="/static/images/my/lc.png"
              ></image>
              <!-- 区域运营中心 -->
              <image
                v-if="
                  userInfo.nickName && memberUserInfo.memberAgencyLevel == 5
                "
                style="width: 147rpx; height: 33rpx"
                src="/static/images/my/yyzx.png"
              ></image>
              <!-- 总裁 -->
              <image
                v-if="
                  userInfo.nickName && memberUserInfo.memberAgencyLevel == 6
                "
                style="width: 78rpx; height: 33rpx"
                src="/static/images/my/zc.png"
              ></image>
            </view>
            <view class="flex">
              <!-- <image class="set" src="/static/images/my/2.png"></image> -->
              <image
                class="set ml-40"
                src="/static/images/my/3.png"
                @click="pageTo('/subPages/mine/setup')"
              ></image>
            </view>
          </view>
          <view class="id" v-if="userInfo.userId"
            >ID: {{ userInfo.userId }}</view
          >
        </view>
      </view>
      <view class="balance">
        <view class="balance-item" @click="pageTo('/subPages/mine/balance')">
          <view class="num">{{ userInfo.remainingSum || 0 }}</view>
          <view class="text">余额</view>
        </view>
        <view class="balance-item" @click="pageTo('/subPages/mine/myPoints')">
          <view class="num">{{ userInfo.creditScore || 0 }}</view>
          <view class="text">积分</view>
        </view>
        <!-- <view class="balance-item">
          <view class="num">{{ userInfo.earnings || 0 }}</view>
          <view class="text">收益</view>
        </view> -->
      </view>
      <view class="member-vip">
        <!-- <image class="circle" src="/static/images/my/4.png"></image> -->
        <view class="member">
          <view class="member-flex">
            <image class="member-img" src="/static/images/my/6.png"></image>
            <view>
              <image class="member-img1" src="/static/images/my/7.png"></image>
              <!-- <view class="member-text">一段文字一段文字一段文字</view> -->
            </view>
          </view>
          <view class="member-btn" @click="pageTo('/pages/memberCenter/index')"
            >查看详情</view
          >
        </view>
        <!-- <image class="circle1" src="/static/images/my/5.png"></image> -->
      </view>
      <view class="order">
        <view class="order-flex">
          <view class="order-title">我的订单</view>
          <view class="order-title1" @click="goOrder('')">
            <view>全部</view>
            <image class="order-img" src="/static/images/my/9.png"></image>
          </view>
        </view>
        <view class="order-content">
          <view class="content-flex" @click="goOrder(1)">
            <image class="order-img1" src="/static/images/my/10.png"></image>
            <view class="content-text">待付款</view>
            <view class="content-num" v-if="statusInfo.status0 > 0">{{
              statusInfo.status0
            }}</view>
          </view>
          <view class="content-flex" @click="goOrder(2)">
            <image class="order-img1" src="/static/images/my/12.png"></image>
            <view class="content-text">待发货</view>
            <view class="content-num" v-if="statusInfo.status1 > 0">{{
              statusInfo.status1
            }}</view>
          </view>
          <view class="content-flex" @click="goOrder(3)">
            <image class="order-img1" src="/static/images/my/14.png"></image>
            <view class="content-text">待收货</view>
            <view class="content-num" v-if="statusInfo.status2 > 0">{{
              statusInfo.status2
            }}</view>
          </view>
          <view class="content-flex" @click="goOrder(4)">
            <image class="order-img1" src="/static/images/my/13.png"></image>
            <view class="content-text">待评价</view>
            <view class="content-num" v-if="statusInfo.status3 > 0">{{
              statusInfo.status3
            }}</view>
          </view>
          <view class="content-flex" @click="goOrder(7)">
            <image class="order-img1" src="/static/images/my/11.png"></image>
            <view class="content-text">退货</view>
            <view class="content-num" v-if="statusInfo.status7 > 0">{{
              statusInfo.status7
            }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="business">
      <view
        class="business-flex"
        @click="pageTo('/subPages/promotion/extensionCenter')"
        v-if="memberUserInfo.memberLevel != 0"
      >
        <image class="business-img" src="/static/images/my/15.png"></image>
        <view class="business-text">推广中心</view>
      </view>
      <view
        class="business-flex"
        @click="pageTo('/subPages/mine/myCollection')"
      >
        <image class="business-img" src="/static/images/my/16.png"></image>
        <view class="business-text">我的收藏</view>
      </view>
      <view class="business-flex" @click="pageTo('/subPages/mine/myAddress')">
        <image class="business-img" src="/static/images/my/17.png"></image>
        <view class="business-text">收货地址</view>
      </view>
      <!-- <view class="business-flex" @click="promotion()"> -->
      <view
        class="business-flex"
        @click="showModal"
        v-if="memberUserInfo.memberLevel != 0"
      >
        <image class="business-img" src="/static/images/my/21.png"></image>
        <view class="business-text">推广二维码</view>
      </view>

      <!-- 			<view class="business-flex" @click="showModal1" v-if="!bdmUser.parentId">
				<image class="business-img" src="/static/images/my/21.png"></image>
				<view class="business-text">绑定关系</view>
			</view>
			 -->

      <view class="business-flex" v-if="memberUserInfo.memberAgencyLevel >= 3">
        <image
          class="business-img"
          src="/static/images/my/18.png"
          @click="pageTo('/subPages/mine/cloudInventory/cloudInventory')"
        ></image>
        <view class="business-text">云库存</view>
      </view>

      <!-- 			<view class="business-flex" >
				<image class="business-img" src="/static/images/my/23.png"
					@click="pageTo('/subPages/mine/superior')"></image>
				<view class="business-text">我的上级</view>
			</view> -->
    </view>

    <u-popup
      :show="userQrShow"
      mode="center"
      :round="10"
      bgColor="#fff"
      @close="userQrShow = false"
    >
      <view style="padding: 0 10rpx">
        <l-painter
          ref="painter"
          isCanvasToTempFilePath
          @success="painterSuccess"
        >
          <template v-show="userQrShow">
            <l-painter-view
              css="padding:30rpx 50rpx 0 50rpx;border-radius:20rpx;background:#fff;"
            >
              <l-painter-text
                text="邀请好友加入本维美"
                css="display:block;margin-bottom:20rpx;font-size:26rpx;font-weight:600;"
              ></l-painter-text>
              <l-painter-text
                text="我的团队邀请你加入"
                css="display:block;margin-bottom:20rpx;font-size:20rpx;color:#b8b8b8;"
              ></l-painter-text>
              <l-painter-image
                src="http://fx.weisou.online/prod-api/profile/upload/2025/04/18/20250418191145.jpg"
                css="width:490rpx;height:490rpx;margin-bottom:40rpx"
              />
              <l-painter-view css="height:110rpx;">
                <l-painter-image
                  :src="userQR.avatar"
                  css="width:80rpx;height:80rpx;margin:16rpx 40rpx 0 0;border-radius:50%;"
                />
                <l-painter-view css="display:inline-block;margin: 16rpx 0 0 0;">
                  <l-painter-text
                    :text="userQR.nickName"
                    css="display:block;font-size:26rpx;text-align:center;"
                  ></l-painter-text>
                  <l-painter-text
                    :text="userQR.ID"
                    css="display:block;font-size:20rpx;color:#b8b8b8;text-align:center;"
                  ></l-painter-text>
                </l-painter-view>
                <l-painter-view css="display:inline-block;">
                  <l-painter-image
                    :src="userQR.QrCode"
                    css="width:110rpx;height:110rpx;margin-left:180rpx"
                  />
                </l-painter-view>
              </l-painter-view>
            </l-painter-view>
          </template>
        </l-painter>
        <view class="btn" @click="saveImg">
          <image class="btn-img" src="@/static/images/download.png"></image>
          <view class="btn-test">保存到手机</view>
        </view>
      </view>
    </u-popup>

    <u-popup
      :show="invited"
      mode="center"
      :round="10"
      bgColor="#fff"
      @close="updateBdmUser"
    >
      <view style="padding: 20 0rpx; width: 700rpx">
        <view
          style="
            text-align: center;
            font-size: 40rpx;
            font-weight: 700;
            margin: 20rpx 0rpx;
          "
          >关系绑定</view
        >

        <u-search
          height="80rpx"
          searchIconColor="#f2f2f2"
          :showAction="true"
          placeholder="搜索用户"
          margin="0 15rpx "
          v-model="codeUserId"
          @search="searchFocus"
          @custom="searchClear"
        ></u-search>

        <view class="user-card" v-if="info.nickName != ''">
          <view>
            <image class="avatar" :src="info.avatar" mode=""></image>
          </view>
          <view class="user-info">
            <view class="user-name">{{ info.nickName }}</view>
            <view class="user-id" style="margin-top: 20rpx"
              >ID: {{ info.userId }} {{ info.phonenumber }}</view
            >
          </view>
        </view>
        <view
          style="
            text-align: center;
            font-size: 20rpx;
            color: #999;
            margin: 20rpx 0rpx;
          "
          >一旦绑定，不可解绑</view
        >
        <view class="btn" @click="getBinding">
          <view class="btn-test">确定绑定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import userApi from "@/api/user";
import loginApi from "@/api/login";
// 导入组件
import { baseUrl } from "@/config";
import { getToken } from "@/utils/auth";
import { formatBigNumber } from "@/utils/index";

const fs = uni.getFileSystemManager();

export default {
  name: "UserCenter",
  data() {
    return {
      baseUrl,
      navBarHeight: "",
      codeUserId: "",
      userInfo: {},
      info: {
        nickName: "",
      },
      memberUserInfo: {},
      bdmUser: {},
      poster: null,
      userQrShow: false,
      invited: false,
      userQR: {
        avatar: "",
        nickName: "",
        ID: "",
        QrCode: "",
      },
      statusInfo: {},
    };
  },
  onLoad() {
    this.navBarHeight = this.$store.getters.heightData.navBarHeight + "px";
  },
  onShow() {
    const token = getToken();
    // if (!token) {
    //   uni.navigateTo({
    //     url: "/pages/login",
    //   });
    //   return;
    // }
    if (token) {
      this.getUserInfo();
    }
  },
  methods: {
    getOrderStatistics() {
      userApi.getOrderStatistics(this.userInfo.userId).then((res) => {
        if (res.code == 200) {
          let list = res.data;
          list.forEach((element) => {
            if (element.orderStatus == 0) {
              this.statusInfo.status0 = element.count;
            }

            if (element.orderStatus == 1) {
              this.statusInfo.status1 = element.count;
            }
            if (element.orderStatus == 2) {
              this.statusInfo.status2 = element.count;
            }

            if (element.orderStatus == 4) {
              this.statusInfo.status3 = element.count;
            }

            if (element.orderStatus == 7) {
              this.statusInfo.status7 = element.count;
            }
          });
        }
      });
    },
    // 获取用户信息
    getUserInfo() {
      let userInfo = uni.getStorageSync("userInfo");
      userApi.fetchUserInfo().then((res) => {
        if (res.code == 200) {
          this.userQR.avatar = res.user.avatar;
          this.userQR.ID = `ID:${res.user.userId}`;
          this.userQR.nickName = res.user.nickName;
          this.userInfo = {
            ...res.user,
            // remainingSum: formatBigNumber(res.user.remainingSum),
            // creditScore: formatBigNumber(res.user.creditScore),
          };
          this.bdmUser = {
            ...res.bdmUser,
          };

          this.memberUserInfo = res.memberUserInfo;
          this.getOrderStatistics();
          uni.setStorageSync("userInfo", {
            ...userInfo,
            nickName: res.user.nickName,
            avatar: res.user.avatar,
            memberLevel: res.memberUserInfo.memberLevel,
            agencyLevel: res.memberUserInfo.memberAgencyLevel,
            phone: res.user.phonenumber,
            payPassword: res.user.payPassword, // 是否设置过支付密码
            parentNickName: res.bdmUser.parentNickName, // 绑定的上级用户名
          });
          // 没有上级 并且 没有弹过
          if (!res.bdmUser.ifOne && !res.bdmUser.parentId) this.invited = true;
          this.codeUserId = "";
          this.info.nickName = "";
        }
      });
    },
    searchClear() {
      loginApi.getReferrer({ userId: this.codeUserId }).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            this.info = res.rows[0];
          } else {
            this.info.nickName = "";
            uni.showToast({
              title: "当前用户非会员",
              icon: "none",
            });
          }
        }
      });
    },
    // 搜索用户
    searchFocus() {
      loginApi.getReferrer({ userId: this.codeUserId }).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            this.info = res.rows[0];
          } else {
            this.info.nickName = "";
            uni.showToast({
              title: "当前用户非会员",
              icon: "none",
            });
          }
        }
      });
    },
    // 绑定上级
    getBinding() {
      let obj = {
        promotionId: this.codeUserId,
        userId: this.userInfo.userId,
      };
      loginApi.binding(obj).then((res) => {
        if (res.code == 200) {
          this.invited = false;
          this.getUserInfo();
          this.updateBdmUser();
        }
      });
    },
    updateBdmUser() {
      let obj = {
        id: this.bdmUser.id,
        ifOne: 1,
      };
      loginApi.updateBdmUser(obj).then((res) => {
        this.invited = false;
      });
    },
    showModal1() {
      this.codeUserId = "";
      this.invited = true;
    },

    showModal() {
      // this.codeUserId = ''
      // this.invited = true

      this.getUserInfo();
      this.getCreateUserQR();
    },
    toLogin() {
      if (!this.userInfo.nickName) {
        uni.navigateTo({
          url: "/pages/login",
        });
      }
    },
    pageTo(item) {
      uni.navigateTo({
        url: item,
      });
    },
    goOrder(status) {
      uni.navigateTo({
        url: "/subPages/myOrder/index?status=" + status,
      });
    },
    promotion() {
      this.$refs.posterRef.show();
    },
    getCreateUserQR() {
      uni.showLoading({
        title: "海报生成中...",
      });
      console.log(this.baseUrl, "baseUrl");
      uni.request({
        url: this.baseUrl + "/applet/userQRCode/createUserQR",
        method: "GET",
        header: {
          Authorization: "Bearer " + getToken(),
        },
        responseType: "arraybuffer",
        success: (res) => {
          const filePath = `${uni.env.USER_DATA_PATH}/temp_image.png`;
          fs.writeFile({
            filePath,
            data: res.data,
            success: (result) => {
              if (result.errMsg === "writeFile:ok") {
                this.userQR.QrCode = filePath;
                this.userQrShow = true;
                uni.hideLoading();
              }
            },
            fail: (err) => {
              console.error("Failed to save image:", err);
            },
          });
        },
        fail: (err) => {
          console.error("Failed to fetch image:", err);
        },
      });
    },
    painterSuccess() {
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "jpg",
        pathType: "url",
        quality: 1,
        success: (res) => {
          if (res.tempFilePath) {
            this.poster = res.tempFilePath;
          }
        },
        fail: (fail) => {
          console.log("fail===", fail);
        },
      });
    },
    saveImageToAlbum(filePath) {
      uni.saveImageToPhotosAlbum({
        filePath,
        success: () => {
          uni.showToast({
            title: "保存成功",
            icon: "success",
          });
        },
        fail: (err) => {
          console.error("Failed to save image:", err);
          uni.showToast({
            title: "保存失败",
            icon: "none",
          });
        },
      });
    },
    saveImg() {
      if (!this.poster || this.poster == null || this.poster == undefined) {
        uni.hideLoading();
        uni.showToast({
          title: "海报生成失败",
          icon: "none",
          mask: true,
        });
        return;
      }
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            // 用户未授权，向用户发起授权请求
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success: (res) => {
                // 用户同意授权，继续保存图片
                this.saveImageToAlbum(this.poster);
              },
              fail: () => {
                // 用户拒绝授权，提示用户开启权限
                uni.showModal({
                  title: "提示",
                  content: "需要您授权保存图片到相册",
                  success: (result) => {
                    if (result.confirm) {
                      // 引导用户去设置页面开启权限
                      uni.openSetting();
                    }
                  },
                });
              },
            });
          } else {
            // 用户已授权，直接保存图片
            console.log(22222, "用户已授权，直接保存图片");
            this.saveImageToAlbum(this.poster);
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  width: 660rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: #ff4254;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40rpx auto 0rpx;
  margin-bottom: 40rpx;
  .btn-test {
    display: flex;
    justify-content: center;
    color: #fff;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 500;
  }

  .btn-img {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }
}
</style>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}

.top-box {
  background-image: url("https://lm.bwmonlinestore.com/prod-api/profile/upload/2025/01/07/my_bg_1_20250107182553A016.png");
  /* 网络路径图片 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;

  .user-info {
    display: flex;
    padding: 30rpx 28rpx 20rpx 28rpx;

    .user-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;

      .user-head {
        width: 120rpx;
        height: 120rpx;
      }
    }

    .id {
      color: #000000;
      font-family: "PingFang SC";
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      opacity: 0.5;
    }

    .info {
      flex: 1;
    }

    .vip {
      width: 85rpx;
      height: 47rpx;
    }

    .henad {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ml-40 {
      margin-left: 40rpx;
    }

    .set {
      width: 40rpx;
      height: 40rpx;
    }

    .name {
      max-width: 252rpx;
      white-space: nowrap;
      /* 禁止文本换行 */
      overflow: hidden;
      /* 隐藏超出部分 */
      text-overflow: ellipsis;
      /* 用省略号代替超出部分 */
      color: #000000;
      font-family: "PingFang SC";
      font-size: 36rpx;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      opacity: 0.9;
    }

    .info-box {
      flex: 1;
      margin: 0 20rpx;

      .user-name {
        display: flex;
        align-items: center;

        .name {
          margin-bottom: 14rpx;
          font-size: 36rpx;
          font-weight: 500;
          color: #fff;
        }
      }

      .id {
        font-size: 24rpx;
        color: #fff;
      }
    }

    .setting-icon {
      width: 48rpx;
      height: 48rpx;

      .icon {
        width: 100%;
        height: 100%;
      }
    }
  }

  .order-box {
    padding: 24rpx;
    margin: 0 28rpx;
    border-radius: 12rpx;
    background-color: #fff;

    .title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 30rpx;
        font-weight: 500;
      }

      .more {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;

        .more-icon {
          width: 34rpx;
          height: 34rpx;
          margin-left: 10rpx;
        }
      }
    }

    .order-list {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .order-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .icon-box {
          width: 48rpx;
          height: 48rpx;

          .order-icon {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          color: #999;
        }
      }
    }
  }
}

.balance {
  display: flex;
  padding: 0 60rpx;
  justify-content: space-between;

  .balance-item {
    flex: 1;
    display: flex;
    align-items: center;
  }
}

.num {
  color: #000000;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 34rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  opacity: 0.9;
}

.text {
  color: #000000;
  font-family: "PingFang SC";
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.5;
  margin-left: 12rpx;
}

.member-vip {
  margin: 0 30rpx;
  margin-top: 37rpx;
  position: relative;
  z-index: 1;
}

.circle {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 28rpx;
  height: 33rpx;
  z-index: 10;
}

.circle1 {
  position: absolute;
  right: 0;
  bottom: 5px;
  width: 28rpx;
  height: 33rpx;
  z-index: 10;
}

.member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 690rpx;
  height: 107rpx;

  background-image: url("https://lm.bwmonlinestore.com/prod-api/profile/upload/2025/01/07/my_bg_20250107182719A017.png");
  /* 网络路径图片 */
  background-size: cover;
  /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat;
  /* 背景图片不重复 */
  padding: 0 36rpx;
}

.member-img {
  width: 42rpx;
  height: 38rpx;
  margin-right: 24rpx;
}

.member-img1 {
  width: 117rpx;
  height: 38rpx;
}

.member-text {
  color: #ffffff;
  font-family: "PingFang SC";
  font-size: 20rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 24rpx;
  opacity: 0.5;
}

.member-btn {
  width: 210rpx;
  height: 64rpx;
  border-radius: 32rpx;
  color: #ff4254;
  font-family: "PingFang SC";
  font-size: 28rpx;
  font-style: normal;
  font-weight: 500;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-flex {
  display: flex;
  align-items: center;
}

.order {
  width: 694rpx;
  height: 204rpx;
  border-radius: 12rpx;
  background: #fff;
  margin: 20rpx 28rpx;
  padding: 24rpx;
}

.order-flex {
  display: flex;
  justify-content: space-between;
}

.order-img {
  width: 34rpx;
  height: 34rpx;
}

.order-title {
  color: #000000;
  font-family: "PingFang SC";
  font-size: 30rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  opacity: 0.9;
}

.order-title1 {
  display: flex;
  color: #000000;
  font-family: "PingFang SC";
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.5;
}

.order-img1 {
  width: 48rpx;
  height: 48rpx;
}

.content-flex {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;

  .content-num {
    position: absolute;
    top: -20rpx;
    right: -10rpx;
    color: #fff;
    background-color: #ff4254;
    border-radius: 50%;
    padding: 2rpx;
    min-width: 30rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14rpx;
  }
}

.order-content {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.content-text {
  color: #4b3138;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.5;
  margin-top: 12rpx;
}

.business {
  display: flex;
  flex-wrap: wrap;
  border-radius: 12rpx;
  background: #fff;
  margin: 20rpx 28rpx;
  padding: 40rpx 0;
}

.business-flex {
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  width: 25%;
  margin-bottom: 40rpx;

  image {
    display: block;
    margin: 0 auto;
  }
}

.business-text {
  color: #000000;
  text-align: center;
  font-family: "PingFang SC";
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.6rpx;
  opacity: 0.9;
  margin-top: 12rpx;
}

.business-img {
  width: 72rpx;
  height: 72rpx;
}

.shopping {
  position: fixed;
  width: 125rpx;
  height: 125rpx;
  right: 28rpx;
  bottom: 5rpx;
  border-radius: 50%;
  background: #fff;
  fill: #fff;
  filter: drop-shadow(0 4rpx 4rpx #00000026);
  display: flex;
  justify-content: center;
  align-items: center;
}

.shopping-img {
  width: 75rpx;
  height: 75rpx;
  border-radius: 50%;
  fill: #fff;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  margin: 10rpx 20rpx;
  background: #f2f2f2;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;

  position: relative;

  .inventory-link {
    right: 20rpx;
    top: 30rpx;
    position: absolute;
    color: #1890ff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    white-space: nowrap;
  }

  .inventory-link i {
    margin-left: 4px;
    font-size: 12px;
    transition: transform 0.2s ease;
  }

  .inventory-link:hover {
    color: #40a9ff;
  }

  .inventory-link:hover i {
    transform: translateX(2px);
  }
}

.user-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
  flex-shrink: 0;
}
</style>
